import React, { Component } from "react"
import "./index.css"
import Item from "../Item"
import PropTypes from "prop-types"

export default class List extends Component {
  static propTypes = {
    changes: PropTypes.func.isRequired,
    clicks: PropTypes.func.isRequired,
    deletes: PropTypes.func.isRequired,
    list: PropTypes.array.isRequired,
    lists: PropTypes.array.isRequired,
  }
  clicks = (type, ...e) => {
    return () => {
      this.props[type](e)
    }
  }

  render() {
    const { list, lists } = this.props
    return (
      <section>
        <h2>
          正在进行<span id="todocount"></span>
        </h2>
        <ol className="demo-box" id="todolist">
          {list.map((item, i) => {
            return (
              <Item
                clicks={this.clicks("clicks", i)}
                changes={this.clicks("changes", item.id, "list")}
                deletes={this.clicks("deletes", item.id, "list")}
                key={item.id}
                item={item}
              />
            )
          })}
        </ol>
        <h2>
          已经完成<span id="donecount"></span>
        </h2>
        <ul id="domelist">
          {lists.map((item, i) => {
            return (
              <Item
                changes={this.clicks("changes", item.id, "lists")}
                deletes={this.clicks("deletes", item.id, "lists")}
                key={item.id}
                item={item}
              />
            )
          })}
        </ul>
      </section>
    )
  }
}
